<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>day06-享+本地生活 | 92-YYDS</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/rz_doc_92/favicon.ico">
    <link rel="apple-touch-icon" href="/rz_doc_92/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/rz_doc_92/assets/css/0.styles.eb696f23.css" as="style"><link rel="preload" href="/rz_doc_92/assets/js/app.c37b6607.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/3.fe9c6282.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/41.6be66339.js" as="script"><link rel="prefetch" href="/rz_doc_92/assets/js/10.a815e7f8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/11.5cf73907.js"><link rel="prefetch" href="/rz_doc_92/assets/js/12.8364f023.js"><link rel="prefetch" href="/rz_doc_92/assets/js/13.189305ad.js"><link rel="prefetch" href="/rz_doc_92/assets/js/14.28e18334.js"><link rel="prefetch" href="/rz_doc_92/assets/js/15.bc379ff7.js"><link rel="prefetch" href="/rz_doc_92/assets/js/16.63adadba.js"><link rel="prefetch" href="/rz_doc_92/assets/js/17.28e8fcdb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/18.917dcdd1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/19.e231595a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/2.c35adb5c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/20.d1e0017d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/21.4f9461ca.js"><link rel="prefetch" href="/rz_doc_92/assets/js/22.8bd2376c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/23.535f0a8f.js"><link rel="prefetch" href="/rz_doc_92/assets/js/24.c596c341.js"><link rel="prefetch" href="/rz_doc_92/assets/js/25.b3cb2221.js"><link rel="prefetch" href="/rz_doc_92/assets/js/26.fac4fec9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/27.77d2df1d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/28.51cbe5c1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/29.0193e27d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/30.b6174252.js"><link rel="prefetch" href="/rz_doc_92/assets/js/31.985027ac.js"><link rel="prefetch" href="/rz_doc_92/assets/js/32.3dd61489.js"><link rel="prefetch" href="/rz_doc_92/assets/js/33.45abb40d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/34.91103b73.js"><link rel="prefetch" href="/rz_doc_92/assets/js/35.2a882fa8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/36.3b80d6cf.js"><link rel="prefetch" href="/rz_doc_92/assets/js/37.11f329d1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/38.974df1fd.js"><link rel="prefetch" href="/rz_doc_92/assets/js/39.7cc0e285.js"><link rel="prefetch" href="/rz_doc_92/assets/js/4.219d9d15.js"><link rel="prefetch" href="/rz_doc_92/assets/js/40.a928365a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/42.31ef2deb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/43.9b423721.js"><link rel="prefetch" href="/rz_doc_92/assets/js/44.f020f7e9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/45.79487c7e.js"><link rel="prefetch" href="/rz_doc_92/assets/js/5.b9d7eb6d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/6.af284094.js"><link rel="prefetch" href="/rz_doc_92/assets/js/7.2449c640.js"><link rel="prefetch" href="/rz_doc_92/assets/js/8.e6bfdace.js"><link rel="prefetch" href="/rz_doc_92/assets/js/9.4f10b15a.js">
    <link rel="stylesheet" href="/rz_doc_92/assets/css/0.styles.eb696f23.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/rz_doc_92/" class="home-link router-link-active"><img src="/rz_doc_92/doraameng.jpg" alt="92-YYDS" class="logo"> <span class="site-name can-hide">92-YYDS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/01" class="sidebar-heading clickable"><span>1-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/02" class="sidebar-heading clickable"><span>2-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/03" class="sidebar-heading clickable"><span>3-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/04" class="sidebar-heading clickable"><span>4-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/05" class="sidebar-heading clickable"><span>5-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/06" class="sidebar-heading clickable open active"><span>6-享+本地生活</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/rz_doc_92/xcx/06.html" aria-current="page" class="active sidebar-link">day06-享+本地生活</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_01-添加房屋-收集表单信息" class="sidebar-link">01.添加房屋—收集表单信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_02-添加房屋-收集身份证信息" class="sidebar-link">02.添加房屋—收集身份证信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-2" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#背景知识" class="sidebar-link">背景知识</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-2" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-2" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_03-添加房屋-校验表单信息" class="sidebar-link">03.添加房屋—校验表单信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-3" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-3" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_04-添加房屋-提交表单" class="sidebar-link">04.添加房屋—提交表单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-4" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-3" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-4" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_05-房屋列表-获取列表" class="sidebar-link">05.房屋列表—获取列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-5" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-4" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-5" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_06-房屋详情-获取详情" class="sidebar-link">06.房屋详情—获取详情</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-6" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-5" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-6" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_07-删除房屋-删除交互" class="sidebar-link">07.删除房屋—删除交互</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-7" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-6" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-7" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_08-删除房屋-发送删除请求" class="sidebar-link">08.删除房屋—发送删除请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-8" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-7" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-8" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_09-删除房屋-前端更新数据" class="sidebar-link">09.删除房屋—前端更新数据</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-9" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#思考" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-9" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_10-编辑房屋-获取房屋信息" class="sidebar-link">10.编辑房屋—获取房屋信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-10" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-8" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-10" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_11-房屋编辑-提交表单" class="sidebar-link">11.房屋编辑—提交表单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-11" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_1-改造onload钩子函数" class="sidebar-link">1. 改造onLoad钩子函数</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_2-发起编辑请求" class="sidebar-link">2. 发起编辑请求</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#小结" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_12-报修管理-介绍" class="sidebar-link">12.报修管理—介绍</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_13-报修管理-表单收集-收集报修房屋信息" class="sidebar-link">13.报修管理—表单收集—收集报修房屋信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-12" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#套路总结" class="sidebar-link">套路总结</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#用到的组件" class="sidebar-link">用到的组件</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-9" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-11" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_14-报修管理-表单收集-收集维修项目" class="sidebar-link">14.报修管理—表单收集—收集维修项目</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-13" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-10" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-12" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_15-报修管理-表单收集-收集预约日期" class="sidebar-link">15.报修管理—表单收集—收集预约日期</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-14" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#用到的组件-2" class="sidebar-link">用到的组件</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-11" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-13" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_16-报修管理-表单收集-收集问题附件" class="sidebar-link">16.报修管理—表单收集—收集问题附件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-15" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#用到的组件-3" class="sidebar-link">用到的组件</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-12" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-14" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_17-报修管理-表单校验" class="sidebar-link">17.报修管理—表单校验</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-16" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-15" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#_18-报修管理-提交表单" class="sidebar-link">18.报修管理—提交表单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#目标-17" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#核心步骤-13" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/06.html#参考代码-16" class="sidebar-link">参考代码</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/07" class="sidebar-heading clickable"><span>7-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/08" class="sidebar-heading clickable"><span>8-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/09" class="sidebar-heading clickable"><span>9-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/10" class="sidebar-heading clickable"><span>10-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="day06-享-本地生活"><a href="#day06-享-本地生活" class="header-anchor">#</a> day06-享+本地生活</h1> <h2 id="_01-添加房屋-收集表单信息"><a href="#_01-添加房屋-收集表单信息" class="header-anchor">#</a> 01.添加房屋—收集表单信息</h2> <h3 id="目标"><a href="#目标" class="header-anchor">#</a> 目标</h3> <p>能独立完成表单数据的收集</p> <h3 id="核心步骤"><a href="#核心步骤" class="header-anchor">#</a> 核心步骤</h3> <ol><li>通过url传参完成房屋小区、楼号、房间号的收集</li> <li>通过表单完成业主姓名、性别、手机号的收集</li> <li>通过上传图片完成身份证照片的收集（下节完成）</li></ol> <h3 id="参考代码"><a href="#参考代码" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">point</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">building</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">room</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">idcardFrontUrl</span><span class="token operator">:</span> <span class="token string">'/static/images/avatar_1.jpg'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">idcardBackUrl</span><span class="token operator">:</span> <span class="token string">'/static/images/avatar_2.jpg'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> point<span class="token punctuation">,</span> building<span class="token punctuation">,</span> room <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      point<span class="token punctuation">,</span>
      building<span class="token punctuation">,</span>
      room<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">enhanced</span> <span class="token attr-name">show-scrollbar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-y</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房屋信息<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{point}}{{building}} {{room}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>业主信息<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span> <span class="token attr-name"><span class="token namespace">model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{name}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>姓名<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请填写您的真实姓名<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>性别<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>horizontal<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ gender }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-radio</span> <span class="token attr-name">icon-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>36rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#5591AF<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{1}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>男<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-radio</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-radio</span> <span class="token attr-name">icon-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>36rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#5591AF<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{0}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>女<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-radio-group</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span> <span class="token attr-name"><span class="token namespace">model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{mobile}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>手机号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>number<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入您的手机号<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id-card-upload<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>本人身份证照片<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id-card-front<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image-preview<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{idcardFrontUrl}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image-remove<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">mark:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>idcardFrontUrl<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>removePicture<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{idcardFrontUrl}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>upload-button<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>enjoy-icon icon-add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>上传人像面照片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id-card-back<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image-preview<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{idcardBackUrl}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image-remove<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">mark:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>idcardBackUrl<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>removePicture<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{idcardBackUrl}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>upload-button<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>enjoy-icon icon-add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>上传国徽面照片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toolbar<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goList<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>enjoy-icon icon-check<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交审核<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_02-添加房屋-收集身份证信息"><a href="#_02-添加房屋-收集身份证信息" class="header-anchor">#</a> 02.添加房屋—收集身份证信息</h2> <h3 id="目标-2"><a href="#目标-2" class="header-anchor">#</a> 目标</h3> <p>能独立完成图片收集功能。</p> <h3 id="背景知识"><a href="#背景知识" class="header-anchor">#</a> 背景知识</h3> <p>小程序没有input type=&quot;file&quot;用于选择文件，要实现类似功能，用以下api:<br><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html" target="_blank" rel="noopener noreferrer"><strong>wx.chooseMedia</strong><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>**：**拍摄或从手机相册中选择图片或视频。<br>低版本请用<a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html" target="_blank" rel="noopener noreferrer">wx.chooseImage<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="核心步骤-2"><a href="#核心步骤-2" class="header-anchor">#</a> 核心步骤</h3> <ol><li>绑定事件选择身份证图片上传。</li> <li>发送请求上传图片，拿到上传后的图片地址。</li></ol> <h3 id="参考代码-2"><a href="#参考代码-2" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;upload-button&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;uploadPicture&quot;</span> <span class="token literal-property property">mark</span><span class="token operator">:</span>type<span class="token operator">=</span><span class="token string">&quot;idcardFrontUrl&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">else</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;enjoy-icon icon-add&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>上传人像面照片<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">point</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">building</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">room</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">idcardFrontUrl</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">idcardBackUrl</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> point<span class="token punctuation">,</span> building<span class="token punctuation">,</span> room <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      point<span class="token punctuation">,</span>
      building<span class="token punctuation">,</span>
      room<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">uploadPicture</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取图片临时地址</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">chooseMedia</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token literal-property property">mediaType</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'image'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">sizeType</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'compressed'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> tempPath <span class="token operator">=</span> res<span class="token punctuation">.</span>tempFiles<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>tempFilePath
    <span class="token keyword">const</span> type <span class="token operator">=</span> ev<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>type
    <span class="token comment">// 上传图片到服务器</span>
    wx<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span>baseURL <span class="token operator">+</span> <span class="token string">'/upload'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">filePath</span><span class="token operator">:</span> tempPath<span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(res)</span>
        <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'上传图片失败'</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token punctuation">[</span>type<span class="token punctuation">]</span><span class="token operator">:</span> data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>url<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_03-添加房屋-校验表单信息"><a href="#_03-添加房屋-校验表单信息" class="header-anchor">#</a> 03.添加房屋—校验表单信息</h2> <h3 id="目标-3"><a href="#目标-3" class="header-anchor">#</a> 目标</h3> <p>能独立完成表单的校验功能。</p> <h3 id="参考代码-3"><a href="#参考代码-3" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">point</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">building</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">room</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">idcardFrontUrl</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">idcardBackUrl</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> point<span class="token punctuation">,</span> building<span class="token punctuation">,</span> room <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      point<span class="token punctuation">,</span>
      building<span class="token punctuation">,</span>
      room<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">uploadPicture</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取图片临时地址</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">chooseMedia</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token literal-property property">mediaType</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'image'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">sizeType</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'compressed'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> tempPath <span class="token operator">=</span> res<span class="token punctuation">.</span>tempFiles<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>tempFilePath
    <span class="token keyword">const</span> type <span class="token operator">=</span> ev<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>type
    <span class="token comment">// 上传图片到服务器</span>
    wx<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span>baseURL <span class="token operator">+</span> <span class="token string">'/upload'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">filePath</span><span class="token operator">:</span> tempPath<span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(res)</span>
        <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'上传图片失败'</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token punctuation">[</span>type<span class="token punctuation">]</span><span class="token operator">:</span> data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>url<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">verifyName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 验证是否为2到5个汉字</span>
    <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4e00-\u9fa5]{2,5}$</span><span class="token regex-delimiter">/</span></span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写真实中文姓名!'</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 宽松验证规则</span>
    <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">1[3-9][0-9]{9}</span><span class="token regex-delimiter">/</span></span>
    <span class="token comment">// 正则验证</span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// 验证未通过</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写正确的手机号'</span><span class="token punctuation">)</span>
    <span class="token comment">// 返回验证结果</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">verifyIdCard</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 图片地址不能为空</span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>idcardBackUrl <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>idcardFrontUrl
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请上传身份证照片!'</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_04-添加房屋-提交表单"><a href="#_04-添加房屋-提交表单" class="header-anchor">#</a> 04.添加房屋—提交表单</h2> <h3 id="目标-4"><a href="#目标-4" class="header-anchor">#</a> 目标</h3> <p>能独立完成表单提交功能。</p> <h3 id="核心步骤-3"><a href="#核心步骤-3" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给按钮绑定事件</li> <li>校验表单并发送请求提交表单</li> <li>返回到房屋列表页</li></ol> <h3 id="参考代码-4"><a href="#参考代码-4" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">async</span> <span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyIdCard</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token keyword">delete</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>__webviewId__
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/room'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'添加房屋失败!'</span><span class="token punctuation">)</span>
    wx<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">delta</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="_05-房屋列表-获取列表"><a href="#_05-房屋列表-获取列表" class="header-anchor">#</a> 05.房屋列表—获取列表</h2> <h3 id="目标-5"><a href="#目标-5" class="header-anchor">#</a> 目标</h3> <p>能独立完成获取列表功能</p> <h3 id="核心步骤-4"><a href="#核心步骤-4" class="header-anchor">#</a> 核心步骤</h3> <ol><li>发请求获取列表数据</li> <li>套用列表数据完成渲染</li></ol> <h3 id="参考代码-5"><a href="#参考代码-5" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">dialogVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 在onShow钩子里发请求，这样添加完成返回时能更新数据</span>
  <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// wx.$http.get('/room')</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> houseList <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/room'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      houseList<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>authorization</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{true}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">show-scrollbar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">enhanced</span> <span class="token attr-name">scroll-y</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>houses<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>houses-title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>房屋信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>houses-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-swipe-cell</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{houseList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">async-close</span> <span class="token attr-name"><span class="token namespace">bind:</span>close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>swipeClose<span class="token punctuation">&quot;</span></span> <span class="token attr-name">right-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ 70 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goDetail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>large<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.point}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.status === 1}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核中<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.status === 2}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核通过<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.status === 3}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag fail<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核失败<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房间号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.building}}{{item.room}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>业主<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.name}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              删除
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-swipe-cell</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>authorization</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>:::success
提示：在公司做开发自测时，可通过更改appData造数据，尽量将各种情况覆盖到。也可让后端帮你改数据库数据或者帮你开发一个可以更改数据库数据的接口。
:::</p> <h2 id="_06-房屋详情-获取详情"><a href="#_06-房屋详情-获取详情" class="header-anchor">#</a> 06.房屋详情—获取详情</h2> <h3 id="目标-6"><a href="#目标-6" class="header-anchor">#</a> 目标</h3> <p>能独立完成房屋详情页功能。</p> <h3 id="核心步骤-5"><a href="#核心步骤-5" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给列表页的房屋项绑定事件</li> <li>跳转房屋详情并携带房屋id</li> <li>onLoad钩子获取id，并根据id查询房屋详情信息</li></ol> <h3 id="参考代码-6"><a href="#参考代码-6" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 列表页面传参</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>cell<span class="token operator">-</span>group bind<span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;goDetail&quot;</span> <span class="token literal-property property">mark</span><span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">&quot;{{item.id}}&quot;</span> border<span class="token operator">=</span><span class="token string">&quot;{{false}}&quot;</span><span class="token operator">&gt;</span>
<span class="token function">goDetail</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/house_pkg/pages/detail/index?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>e<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
    
<span class="token comment">// 详情页面发请求</span>
<span class="token comment">// house_pkg/pages/detail/index</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> id <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getHouseDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> houseDetail <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/room/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token operator">...</span>houseDetail<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">enhanced</span> <span class="token attr-name">show-scrollbar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>house-detail<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房屋信息<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{point}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 1}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核中<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 2}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核通过<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 3}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag fail<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>审核失败<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>业主信息<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房间号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{building}}{{room}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>业主<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{name}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>手机号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{mobile}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id-card<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>本人身份证照片<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id-card-front<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{idcardFrontUrl}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id-card-back<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{idcardBackUrl}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_07-删除房屋-删除交互"><a href="#_07-删除房屋-删除交互" class="header-anchor">#</a> 07.删除房屋—删除交互</h2> <h3 id="目标-7"><a href="#目标-7" class="header-anchor">#</a> 目标</h3> <p>掌握常见的删除交互</p> <h3 id="核心步骤-6"><a href="#核心步骤-6" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给左滑组件绑定事件close</li> <li>在close回调中显示“确认删除”弹框</li> <li>点击确认删除弹框中的确认按钮后进行删除操作</li></ol> <h3 id="参考代码-7"><a href="#参考代码-7" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>

  <span class="token function">swipeClose</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ev<span class="token punctuation">)</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> position<span class="token punctuation">,</span> instance <span class="token punctuation">}</span> <span class="token operator">=</span> ev<span class="token punctuation">.</span>detail
    <span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token string">'right'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 显示 Dialog 对话框</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">dialogVisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token comment">// swiper-cell 滑块关闭</span>
      instance<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_08-删除房屋-发送删除请求"><a href="#_08-删除房屋-发送删除请求" class="header-anchor">#</a> 08.删除房屋—发送删除请求</h2> <h3 id="目标-8"><a href="#目标-8" class="header-anchor">#</a> 目标</h3> <p>能独立完成删除功能</p> <h3 id="核心步骤-7"><a href="#核心步骤-7" class="header-anchor">#</a> 核心步骤</h3> <ol><li>点击左滑删除时要完成参数（房屋id）的传递</li> <li>点击确认框的确认删除时，发送删除请求</li> <li>删除完成后，刷新列表</li></ol> <h3 id="参考代码-8"><a href="#参考代码-8" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>van<span class="token operator">-</span>swipe<span class="token operator">-</span>cell wx<span class="token operator">:</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;{{houseList}}&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;id&quot;</span> <span class="token literal-property property">mark</span><span class="token operator">:</span>index<span class="token operator">=</span><span class="token string">&quot;{{index}}&quot;</span> <span class="token literal-property property">mark</span><span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">&quot;{{item.id}}&quot;</span> async<span class="token operator">-</span>close bind<span class="token operator">:</span>close<span class="token operator">=</span><span class="token string">&quot;swipeClose&quot;</span> right<span class="token operator">-</span>width<span class="token operator">=</span><span class="token string">&quot;{{ 70 }}&quot;</span><span class="token operator">&gt;</span>

<span class="token keyword">let</span> house_id <span class="token operator">=</span> <span class="token number">0</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// ......</span>

  <span class="token function">swipeClose</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(ev)</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> position<span class="token punctuation">,</span> instance <span class="token punctuation">}</span> <span class="token operator">=</span> ev<span class="token punctuation">.</span>detail
    house_id <span class="token operator">=</span> ev<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>id
    <span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token string">'right'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 显示 Dialog 对话框</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">dialogVisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token comment">// swiper-cell 滑块关闭</span>
      instance<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">dialogClose</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(ev)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail <span class="token operator">===</span> <span class="token string">'confirm'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// console.log(house_id)</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">'/room/'</span> <span class="token operator">+</span> house_id<span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>:::success
注意：在自定义组件中接收事件时， mark 不包含自定义组件外的节点的 mark 。
:::</p> <h2 id="_09-删除房屋-前端更新数据"><a href="#_09-删除房屋-前端更新数据" class="header-anchor">#</a> 09.删除房屋—前端更新数据</h2> <h3 id="目标-9"><a href="#目标-9" class="header-anchor">#</a> 目标</h3> <p>掌握前端刷新删除后类别数据的方法</p> <h3 id="思考"><a href="#思考" class="header-anchor">#</a> 思考</h3> <p>如果一个列表页面，已经加载了5页了，现在删除了第5页的某个数据，要求删除后，列表更新，如何实现？</p> <h3 id="参考代码-9"><a href="#参考代码-9" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 首先在我们滑动删除的回调函数里面，获取当前项的 索引号，赋值给全局变量</span>
<span class="token function">swipeClose</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> position<span class="token punctuation">,</span> instance <span class="token punctuation">}</span> <span class="token operator">=</span> ev<span class="token punctuation">.</span>detail

  <span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token string">'right'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 显示 Dialog 对话框</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">dialogVisible</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token comment">// 待删除的房屋id和索引</span>
    house_id <span class="token operator">=</span> ev<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>id
    house_index <span class="token operator">=</span> ev<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>index

    <span class="token comment">// swiper-cell 滑块关闭</span>
    instance<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
    
 <span class="token comment">// 前端更新列表数据方式，  再本地使用 splice删除， 也可以调用后端的 请求接口</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>houseList<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>house_index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">houseList</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>houseList<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_10-编辑房屋-获取房屋信息"><a href="#_10-编辑房屋-获取房屋信息" class="header-anchor">#</a> 10.编辑房屋—获取房屋信息</h2> <h3 id="目标-10"><a href="#目标-10" class="header-anchor">#</a> 目标</h3> <p>能独立完成编辑房屋功能</p> <h3 id="核心步骤-8"><a href="#核心步骤-8" class="header-anchor">#</a> 核心步骤</h3> <ol><li>从详情页跳转编辑页时传递房屋id参数</li> <li>根据房屋id查询房屋信息并完成页面绑定</li> <li>提交表单（下节完成）</li></ol> <h3 id="参考代码-10"><a href="#参考代码-10" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 页面</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>cell title<span class="token operator">=</span><span class="token string">&quot;{{point}}&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;tag info&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{status === 1}}&quot;</span><span class="token operator">&gt;</span>正在审核<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;tag success&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{status === 2}}&quot;</span><span class="token operator">&gt;</span>审核成功<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;tag fail&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{status === 3}}&quot;</span><span class="token operator">&gt;</span>审核失败<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>cell<span class="token operator">&gt;</span>

<span class="token comment">// js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> id <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      id<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getHouseDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> houseDetail <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/room/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 重点，对象解构，可以直接设置值</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token operator">...</span>houseDetail<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">editHouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/house_pkg/pages/form/index?id='</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_11-房屋编辑-提交表单"><a href="#_11-房屋编辑-提交表单" class="header-anchor">#</a> 11.房屋编辑—提交表单</h2> <h3 id="目标-11"><a href="#目标-11" class="header-anchor">#</a> 目标</h3> <p>能独立完成编辑房屋功能</p> <h3 id="_1-改造onload钩子函数"><a href="#_1-改造onload钩子函数" class="header-anchor">#</a> 1. 改造onLoad钩子函数</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//  house_pkg/pages/form/index  和我们的新增房屋是同一个页面</span>
<span class="token comment">// 需要改造一下onLoad参数格式，  通过有没有id来判读是 新增房屋 还是 编辑房屋</span>
<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> point<span class="token punctuation">,</span> building<span class="token punctuation">,</span> room<span class="token punctuation">,</span> id <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">setNavigationBarTitle</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'编辑房屋信息'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 获取房屋信息</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取并记录地址参数</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> point<span class="token punctuation">,</span> building<span class="token punctuation">,</span> room <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token keyword">async</span> <span class="token function">getHouseDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>id<span class="token punctuation">)</span> <span class="token keyword">return</span>
  <span class="token comment">// 请求数据接口</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> houseDetail <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/room/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span>
  <span class="token comment">// 检测接口返回的结果</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// 渲染数据</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>houseDetail <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
      
      

</code></pre></div><h3 id="_2-发起编辑请求"><a href="#_2-发起编辑请求" class="header-anchor">#</a> 2. 发起编辑请求</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 改造之前新增房屋的请求 ----  因为编辑的时候，是将服务器的返回值全部赋值给了</span>
<span class="token comment">// data上面， 会多一些后端不需要的字段， 又因为编辑和新增接口地址一模一样，只不过</span>
<span class="token comment">// 编辑的时候 data上面多了一个id属性，后端就是通过这个去判断是否是编辑还是登陆的</span>
<span class="token keyword">async</span> <span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 	<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyIdCard</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token keyword">delete</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>__webviewId__
    <span class="token keyword">delete</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>status
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/room'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'添加房屋失败!'</span><span class="token punctuation">)</span>
    wx<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">delta</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>id <span class="token operator">?</span> <span class="token number">2</span> <span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h3 id="小结"><a href="#小结" class="header-anchor">#</a> 小结</h3> <p>添加、编辑放在一起复用时，一般通过id来区分是添加还是编辑。</p> <h2 id="_12-报修管理-介绍"><a href="#_12-报修管理-介绍" class="header-anchor">#</a> 12.报修管理—介绍</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676943689576-6e17b9e4-2fb3-47b6-ae7a-ee8ad4df0f15.png#averageHue=%23f8f1e1&amp;clientId=u2d3e304e-6f59-4&amp;from=paste&amp;height=277&amp;id=u27433226&amp;name=image.png&amp;originHeight=554&amp;originWidth=1356&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=113480&amp;status=done&amp;style=none&amp;taskId=ucc4dde88-7ba6-45d0-9a89-ff6adb0695e&amp;title=&amp;width=678" alt="image.png"></p> <h2 id="_13-报修管理-表单收集-收集报修房屋信息"><a href="#_13-报修管理-表单收集-收集报修房屋信息" class="header-anchor">#</a> 13.报修管理—表单收集—收集报修房屋信息</h2> <h3 id="目标-12"><a href="#目标-12" class="header-anchor">#</a> 目标</h3> <p>能独立完成报修房屋选择功能</p> <h3 id="套路总结"><a href="#套路总结" class="header-anchor">#</a> 套路总结</h3> <p>新增/编辑表单三部曲：收集——验证——提交
:::success
提示：字段尽量和接口的字段保持一致，这样提交的时候就可以免去字段转换的步骤。
:::</p> <h3 id="用到的组件"><a href="#用到的组件" class="header-anchor">#</a> 用到的组件</h3> <p>动作面板：<a href="https://vant-contrib.gitee.io/vant-weapp/#/action-sheet" target="_blank" rel="noopener noreferrer">van-action-sheet<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="核心步骤-9"><a href="#核心步骤-9" class="header-anchor">#</a> 核心步骤</h3> <ol><li>发请求获取能报修房屋列表</li> <li>给选择报修单元组件（van-cell）绑定事件———显示选择列表弹层（van-action-sheet）</li> <li>给列表弹层绑定选择事件bind:select</li> <li>在选择回调中获取选中的值并显示到页面</li></ol> <h3 id="参考代码-11"><a href="#参考代码-11" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// repair_pkg/pages/form/index</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">currentDate</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token literal-property property">selectedHouse</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">selectedRepairItem</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">appointment</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">attachment</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">houseLayerVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">repairLayerVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">dateLayerVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">houseList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">repairItems</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/house'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// console.log(data)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">houseList</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// .......</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 页面输入框wxml</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>cell value<span class="token operator">=</span><span class="token string">&quot;{{selectedHouse.name || '请选择报修房屋'}}&quot;</span> value<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{{selectedHouse.name &amp;&amp; 'active-cell'}}&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>click<span class="token operator">=</span><span class="token string">&quot;openHouseLayer&quot;</span> is<span class="token operator">-</span>link border<span class="token operator">=</span><span class="token string">&quot;{{false}}&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    
<span class="token comment">// 动作面板的数据绑定</span>
  <span class="token operator">&lt;</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet bind<span class="token operator">:</span>close<span class="token operator">=</span><span class="token string">&quot;closeHouseLayer&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>cancel<span class="token operator">=</span><span class="token string">&quot;closeHouseLayer&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>select<span class="token operator">=</span><span class="token string">&quot;selectHouse&quot;</span> round show<span class="token operator">=</span><span class="token string">&quot;{{ houseLayerVisible }}&quot;</span> actions<span class="token operator">=</span><span class="token string">&quot;{{ houseList }}&quot;</span> cancel<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">&quot;取消&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;选择报修房屋&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

<span class="token comment">// JS里面的 面板选择回调办法</span>
<span class="token function">selectHouse</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">selectedHouse</span><span class="token operator">:</span> e<span class="token punctuation">.</span>detail
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="_14-报修管理-表单收集-收集维修项目"><a href="#_14-报修管理-表单收集-收集维修项目" class="header-anchor">#</a> 14.报修管理—表单收集—收集维修项目</h2> <h3 id="目标-13"><a href="#目标-13" class="header-anchor">#</a> 目标</h3> <p>能独立完成维修项目的收集功能。</p> <h3 id="核心步骤-10"><a href="#核心步骤-10" class="header-anchor">#</a> 核心步骤</h3> <ol><li>发请求获取维修项目列表</li> <li>给选择维修项目单元组件（van-cell）绑定事件———显示选择维修项目列表弹层（van-action-sheet）</li> <li>给列表弹层绑定选择事件bind:select</li> <li>在选择回调中获取选中的值并显示到页面</li></ol> <h3 id="参考代码-12"><a href="#参考代码-12" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// .... 省略</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRepairItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getRepairItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/repairItem'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">repairItems</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">selectRepairItem</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">selectedRepairItem</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// .... 省略</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>维修项目<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>
          <span class="token punctuation">&quot;</span>{{selectedRepairItem.name &amp;&amp; 'active-cell'}}<span class="token punctuation">&quot;</span></span> 
          <span class="token attr-name"><span class="token namespace">bind:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>openRepairLayer<span class="token punctuation">&quot;</span></span> 
          <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{selectedRepairItem.name || '请选择维修项目'}}<span class="token punctuation">&quot;</span></span> 
          <span class="token attr-name">is-link</span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><h2 id="_15-报修管理-表单收集-收集预约日期"><a href="#_15-报修管理-表单收集-收集预约日期" class="header-anchor">#</a> 15.报修管理—表单收集—收集预约日期</h2> <h3 id="目标-14"><a href="#目标-14" class="header-anchor">#</a> 目标</h3> <p>能独立完成预约日期收集功能</p> <h3 id="用到的组件-2"><a href="#用到的组件-2" class="header-anchor">#</a> 用到的组件</h3> <ol><li>时间选择控件：<a href="https://vant-contrib.gitee.io/vant-weapp/#/datetime-picker" target="_blank" rel="noopener noreferrer">van-datetime-picker<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>弹出层控件：<a href="https://vant-contrib.gitee.io/vant-weapp/#/popup" target="_blank" rel="noopener noreferrer">van-popup<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ol> <h3 id="核心步骤-11"><a href="#核心步骤-11" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给选择日期单元绑定事件——显示选择日期弹层（van-popup）</li> <li>给日期控件绑定确认事件confirm</li> <li>在确认回调中获取时间戳</li> <li>将时间戳格式化并显示</li></ol> <h3 id="参考代码-13"><a href="#参考代码-13" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">selectDate</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// console.log(ev)</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">currentDate</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">,</span>
    <span class="token literal-property property">appointment</span><span class="token operator">:</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">formatDate</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 格式化日期</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">closeDateLayer</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">formatDate</span><span class="token punctuation">(</span><span class="token parameter">time</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span>
  <span class="token keyword">const</span> year <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">let</span> month <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token comment">// 获取月份，月份从0开发，所以加1</span>
  <span class="token keyword">let</span> day <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  month <span class="token operator">=</span> month <span class="token operator">&lt;</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> month <span class="token operator">:</span> month
  day <span class="token operator">=</span> day <span class="token operator">&lt;</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> day <span class="token operator">:</span> day
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>year<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>month<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>day<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>van<span class="token operator">-</span>cell title<span class="token operator">-</span>width<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;预约日期&quot;</span> 
	value<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{{appointment &amp;&amp; 'active-cell'}}&quot;</span> 
	<span class="token literal-property property">bind</span><span class="token operator">:</span>click<span class="token operator">=</span><span class="token string">&quot;openDateLayer&quot;</span> is<span class="token operator">-</span>link 
	value<span class="token operator">=</span><span class="token string">&quot;{{appointment || '请选择上门维修日期'}}&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><h2 id="_16-报修管理-表单收集-收集问题附件"><a href="#_16-报修管理-表单收集-收集问题附件" class="header-anchor">#</a> 16.报修管理—表单收集—收集问题附件</h2> <h3 id="目标-15"><a href="#目标-15" class="header-anchor">#</a> 目标</h3> <p>能独立完成问题附件收集功能</p> <h3 id="用到的组件-3"><a href="#用到的组件-3" class="header-anchor">#</a> 用到的组件</h3> <p>文件上传：<a href="https://vant-contrib.gitee.io/vant-weapp/#/uploader" target="_blank" rel="noopener noreferrer">van-uploader<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="核心步骤-12"><a href="#核心步骤-12" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给文件上传组件绑定事件after-read</li> <li>在事件回调中获取要上传的文件</li> <li>发送请求将文件上传到服务器</li> <li>将返回结果push到附件数组字段中（attachment）</li></ol> <h3 id="参考代码-14"><a href="#参考代码-14" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// wxml</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>uploader preview<span class="token operator">-</span>size<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>after<span class="token operator">-</span>read<span class="token operator">=</span><span class="token string">&quot;afterRead&quot;</span> file<span class="token operator">-</span>list<span class="token operator">=</span><span class="token string">&quot;{{ fileList }}&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    
<span class="token comment">// js</span>
<span class="token function">afterRead</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(ev)</span>
    <span class="token comment">// 获取文件临时路径</span>
    <span class="token keyword">const</span> filePath <span class="token operator">=</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>file<span class="token punctuation">.</span>url
    <span class="token comment">// 上传文件</span>
    wx<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'https://live-api.itheima.net/upload'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      filePath<span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(res)</span>
        <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'文件上传失败！'</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>attachment<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">attachment</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>attachment<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="_17-报修管理-表单校验"><a href="#_17-报修管理-表单校验" class="header-anchor">#</a> 17.报修管理—表单校验</h2> <h3 id="目标-16"><a href="#目标-16" class="header-anchor">#</a> 目标</h3> <p>能独立完成表单校验功能。</p> <h3 id="参考代码-15"><a href="#参考代码-15" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">verifyHouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> valid <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>selectedHouse<span class="token punctuation">.</span>id
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请选择房屋信息'</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">verifyRepairItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> valid <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>selectedRepairItem<span class="token punctuation">.</span>id
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请选择维修项目信息'</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 宽松验证规则</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^1[3-9][0-9]{9}$</span><span class="token regex-delimiter">/</span></span>
  <span class="token comment">// 正则验证</span>
  <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token comment">// 验证未通过</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写正确的手机号'</span><span class="token punctuation">)</span>
  <span class="token comment">// 返回验证结果</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">verifyDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d{4}-\d{2}-\d{2}</span><span class="token regex-delimiter">/</span></span>
  <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>appointment<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请选择预约日期'</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token function">verifyDescription</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> valid <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>description<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写问题描述'</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>:::success
提示：附件没有验证，因为是可选项，所以可以跳过验证。
:::</p> <h2 id="_18-报修管理-提交表单"><a href="#_18-报修管理-提交表单" class="header-anchor">#</a> 18.报修管理—提交表单</h2> <h3 id="目标-17"><a href="#目标-17" class="header-anchor">#</a> 目标</h3> <p>能独立完成表单提交功能。</p> <h3 id="核心步骤-13"><a href="#核心步骤-13" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给提交报修按钮绑定事件</li> <li>在事件回调中验证表单并发送请求提交表单信息</li> <li>成功后跳转列表页</li></ol> <h3 id="参考代码-16"><a href="#参考代码-16" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">async</span> <span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>
    <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyHouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span>
    <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyRepairItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span>
    <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span>
    <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span>
    <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyDescription</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span>
    <span class="token keyword">return</span>
  <span class="token keyword">const</span> houseId <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>selectedHouse<span class="token punctuation">.</span>id
  <span class="token keyword">const</span> repairItemId <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>selectedRepairItem<span class="token punctuation">.</span>id
  <span class="token keyword">const</span> <span class="token punctuation">{</span> mobile<span class="token punctuation">,</span> appointment<span class="token punctuation">,</span> description<span class="token punctuation">,</span> attachment <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data
  <span class="token keyword">const</span> <span class="token punctuation">{</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/repair'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    houseId<span class="token punctuation">,</span>
    repairItemId<span class="token punctuation">,</span>
    mobile<span class="token punctuation">,</span>
    appointment<span class="token punctuation">,</span>
    description<span class="token punctuation">,</span>
    attachment<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/repair_pkg/pages/list/index'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/rz_doc_92/xcx/05.html" class="prev">
        day05-享+本地生活
      </a></span> <span class="next"><a href="/rz_doc_92/xcx/07.html">
        day07-享+本地生活
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/rz_doc_92/assets/js/app.c37b6607.js" defer></script><script src="/rz_doc_92/assets/js/3.fe9c6282.js" defer></script><script src="/rz_doc_92/assets/js/41.6be66339.js" defer></script>
  </body>
</html>
